<script setup lang="ts">
import { ref } from "vue";
const stepValue = ref(1);
import firstStep from "./firstStep/index.vue";
import secondStep from "./secondStep/index.vue";
import thirdStep from "./thirdStep/index.vue";
import fourthStep from "./fourthStep/index.vue";
import fifthStep from "./result/index.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const goBack = () => {
  router.push({
    name: "projectApplication"
  });
};
</script>

<template>
  <el-card
    class="m-[20px]"
    :body-style="{
      padding: '10px'
    }"
  >
    <template #header>
      <el-page-header @back="goBack">
        <template #content>
          <span class="mr-3 text-large font-600"> 创建项目 </span>
        </template>
      </el-page-header>
    </template>
    <el-steps
      style="max-width: 900px"
      class="mt-[20px] m-auto"
      :active="stepValue"
      align-center
    >
      <el-step title="项目基础信息" />
      <el-step title="项目计划详情" />
      <el-step title="项目预算" />
      <el-step title="预览" />
      <el-step title="提交" />
    </el-steps>

    <firstStep v-if="stepValue == 1" @submitClick="val => (stepValue = val)" />
    <secondStep v-if="stepValue == 2" @submitClick="val => (stepValue = val)" />
    <thirdStep v-if="stepValue == 3" @submitClick="val => (stepValue = val)" />
    <fourthStep v-if="stepValue == 4" @submitClick="val => (stepValue = val)" />
    <fifthStep v-if="stepValue == 5" />
  </el-card>
  <div class="h-[80px]"></div>
</template>

<style lang="scss" scoped></style>
